<template>
    <div class="record">

      <van-button class="headers" style="" @click="startPopupShow=true" >{{currentDate2}}<i class="iconfont icon-xia"></i></van-button>

      <div class="content">
        <div v-if="statusText.length!=0" class="noData">
          <img src="../../images/xj.png" alt="">
          <p>{{statusText}}</p>
        </div>
        <div class="kq-list" v-else v-for="(item,index) in dataList" :key="index">
          <p class="yg-name">员工姓名: {{item.employee_name}}</p>
          <p class="kqsd">
            打卡日期: {{currentDate2}} <van-tag type="success">{{week}}</van-tag>
          </p>
          <p class="kqsd">
            考勤时段: {{item.sign_time}}
          </p>
          <p class="kqsd">
            签到时间: {{item.start_sign_hour}}
            <van-tag v-if="!item.start_sign_hour" type="danger" >未签到</van-tag>
            <!--<van-tag type="success" v-else-if="item.s_daka<item.ss">已签到</van-tag>-->
            <van-tag type="danger" v-else-if="item.s_daka>item.ss">迟到</van-tag>
          </p>
          <p class="kqsd">
            签退时间: {{item.end_sign_hour}}
            <van-tag v-if="!item.end_sign_hour" type="danger" >未签退</van-tag>
            <!--<van-tag type="success" v-else-if="item.e_daka>item.ss2">已签退</van-tag>-->
            <van-tag type="danger"  v-if="item.e_daka<item.ss2&&item.e_daka&&item.end_sign_hou!=''&&!item.up_end_sign_type&&!item.up_start_sign_type">早退</van-tag>
            <van-tag type="success"  v-else-if="item.e_daka>item.ss2&&item.end_sign_hou!=''&&!item.up_end_sign_type&&!item.up_start_sign_type">加班</van-tag>
          </p>
          <div class="kg" v-if="!item.start_sign_hour&&!item.end_sign_hour&&item.nowSJC>item.endSJC">矿工</div>
          <div class="kg" v-else-if="item.up_end_sign_type==4||item.up_start_sign_type==4">请假</div>
          <div class="kg" v-else-if="item.up_end_sign_type==5||item.up_start_sign_type==5">加班</div>
        </div>

      </div>

      <!--<van-datetime-picker-->
        <!--v-model="currentDates"-->
        <!--type="date"-->
        <!--:min-date="minDate"-->
        <!--@confirm="test"-->
      <!--/>-->

      <!--时间的弹出层-->
      <van-popup v-model="startPopupShow" class="mask-sTime" style="">
        <van-datetime-picker
          class="pickerTime"
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          type="date"
          @confirm="test"
          @cancel="closestartPopup"
        />

      </van-popup>

      <backs></backs>
    </div>
</template>

<script>
  import backs from "@/components/menu/backPrev";
    export default {
        name: "record",
      components: {
        backs
      },
      data(){
        return {
          stime:'',
          startPopupShow:false,//开始时间的弹出层
          minHour: 10,
          maxHour: 20,
          minDate: new Date(2016,1,1),
          maxDate: new Date(2019,12,10),
          currentDate: {},//当前时间
          currentDate2: '2019-01-09',//当前时间
          currentDates: {},//当前时间
          getCurrentDate:"",
          getCurrentDatePrev:"",//记录上一次的值

          dataList: [], //数据列表
          idxx:0,
          week: '',
          statusText: ''
        }
      },
      methods:{
      //点击时间的确定按钮
        test(){
          this.dataList = []
          this.startPopupShow=false;//隐藏弹出层
          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;
          // console.log( y+'-'+m+'-'+d);
          this.currentDate2 = y+'-'+m+'-'+d
          var str = "";
          var week = new Date(y+'-'+m+'-'+d).getDay();
          if (week == 0) {
            str = "星期日";
          } else if (week == 1) {
            str = "星期一";
          } else if (week == 2) {
            str = "星期二";
          } else if (week == 3) {
            str = "星期三";
          } else if (week == 4) {
            str = "星期四";
          } else if (week == 5) {
            str = "星期五";
          } else if (week == 6) {
            str = "星期六";
          }
          this.week = str
          this.getData()
        },
        // 将时分秒转换成秒比较
        backMiao(time){
          var s = '';
          var hour = time.split(':')[0];
          var min = time.split(':')[1];
          var sec = time.split(':')[2];

          s = Number(hour*3600) + Number(min*60) + Number(sec);

          return s;
        },
        //点击开始时间的确定按钮
        startTimeFn(){
          this.idxx=1;
          //获取开始时间
          var myDate = new Date();
          var mytime=myDate.getMonth();
          mytime = (mytime+1) < 10 ? ('0' + (mytime+1)) : mytime;
          var y=myDate.getFullYear();
          var d = new Date().getDate();
          d = d < 10 ? ('0' + d) : d;

          this.currentDate=new Date(y,mytime-1,d);
          // this.currentDates=new Date(y,mytime-1,d);
          this.currentDate2 = y+'-'+mytime+'-'+d
          this.maxDate = new Date(y,(mytime-1),d)
          var str = "";
          var week = new Date().getDay();
          if (week == 0) {
            str = "星期日";
          } else if (week == 1) {
            str = "星期一";
          } else if (week == 2) {
            str = "星期二";
          } else if (week == 3) {
            str = "星期三";
          } else if (week == 4) {
            str = "星期四";
          } else if (week == 5) {
            str = "星期五";
          } else if (week == 6) {
            str = "星期六";
          }
          this.week = str
          // console.log(y+'-'+mytime+'-'+d)
          // this.getData()
        },
        //关闭开始时间的弹出层
        closestartPopup(){
          this.startPopupShow=false;
        },
        getData(){
          // if(!this.idxx){
          //   console.log(this.currentDate)
          // }

          var $this=this;
          this.$http.setting.get('/attend',{
            params:{
              sign_date: $this.currentDate2
            }
          })
            .then(function (res) {
              var empId = localStorage.getItem('empId')
              if(empId != 0 && res.data.code !=0){

                $this.$toast.fail(res.data.message);
                $this.$router.go(-1)
                return;
              }
              if(!res.data.code){
                // console.log(res.data.data.length)
                // if(res.data.data == []){
                //   $this.dataList = "暂无考勤记录"
                // }
                var ss = '';
                var ss2 = '';
                var strTime = '';
                var etrTime = '';
                if(Array.isArray(res.data.data)&& !res.data.data.length){
                  $this.statusText = '休假'
                }else{
                  $this.statusText = ''
                }
                for(var v in res.data.data){
                  //sign_time
                  strTime = res.data.data[v].sign_time.substring(0,res.data.data[v].sign_time.indexOf('-'))
                  etrTime = res.data.data[v].sign_time.substring(res.data.data[v].sign_time.indexOf('-')+1,res.data.data[v].sign_time.length)
                  ss = $this.backMiao(strTime)
                  ss2 = $this.backMiao(etrTime)
                  if(res.data.data[v].start_sign_hour){
                    res.data.data[v].s_daka = $this.backMiao(res.data.data[v].start_sign_hour);
                  } else {
                    res.data.data[v].s_daka = 0
                  }
                  res.data.data[v].nowSJC = new Date().getTime() // 当前的时间戳
                  res.data.data[v].endSJC = $this.getsfm(etrTime) // 签退的时间戳
                  res.data.data[v].ss = ss
                  res.data.data[v].ss2 = ss2

                  if(res.data.data[v].end_sign_hour){
                    res.data.data[v].e_daka = $this.backMiao(res.data.data[v].end_sign_hour);
                  } else {
                    res.data.data[v].e_daka = 0
                  }
                  $this.dataList.push(res.data.data[v])
                }
                // console.log($this.dataList)
              }

            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              console.log(error);
            });

        },
        getsfm (etime) {
          var myDate = new Date()
          var h = myDate.getHours()
          h = h < 10 ? ('0' + h) : h
          var m = myDate.getMinutes()
          m = m < 10 ? ('0' + m) : m
          var r = myDate.getSeconds()
          r = r < 10 ? ('0' + r) : r
          var sjc2 = new Date(this.currentDate2 + ' ' + etime).getTime()
          return sjc2
        }
      },
      mounted(){
        var d = new Date()
        var my_hours = d.getHours()
        var my_minutes = d.getMinutes()
        var my_seconds = d.getSeconds()
        // console.log(my_hours + ':' + my_minutes + ':' + my_seconds)
        this.startTimeFn()
        this.getData()
      }
    }
</script>

<style scoped>
  .van-popup{
    width:300px!important;
  }
  .headers{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0!important;font-weight: bold;
  }
  .content{
    margin-top:40px;
    padding:10px;
  }
  .kq-list{
    margin:5px auto;
    border-radius: 3px;
    background: #fff;
    color:#000;
    padding:10px;
    position: relative;
  }
  .yg-name{
    font-size:16px;
    text-align: left;
  }
  .kqsd{
    font-size:16px;
    text-align: left;
  }
  .mask-sTime .van-picker__cancel{
    font-size:14px!important;
  }
  .van-picker__cancel, .van-picker__confirm{
    font-size:14px!important;
  }

  .kg{
    width: 1.5rem;
    position: absolute;
    right: 10%;
    font-size:16px;
    top: 20px;
    color: red;
    border: 1px solid;
    border-radius: 0.05rem;
    -webkit-transform: rotate(-30deg);
    transform: rotate(30deg);
    font-style: initial
  }
  .headers button{
    font-size:14px;
  }
  .noData{
    font-size:20px;
    color:#bfbfbf;
    padding:30px 0;
    text-align: center;
  }
  .noData img{
    width:50px;
    height:50px;
  }
</style>
